<template>

  <!-- <div
    style="display: flex; justify-content: space-between; align-items: center"  
  >
    <div>
      <ElMenu mode="horizontal" :ellipsis="false" @select="handleSelect"  :default-active="activeIndex">
        <ElMenuItem style="padding-left: 50px; padding-right: 50px">
          Processing Center <el-icon><Sunny /></el-icon></ElMenuItem
        >
        <ElMenuItem style="padding-left: 50px; padding-right: 50px"
        index="home"  > <el-icon><House /></el-icon>首页</ElMenuItem
        >
        <ElMenuItem index="soul" style="padding-left: 50px; padding-right: 50px"><el-icon><Message /></el-icon> 留言板</ElMenuItem>

        <ElMenuItem index="whisper"><el-icon><ChatDotRound /></el-icon> 我的消息</ElMenuItem>
      </ElMenu>
    </div>
    <div>
      <User></User>
    </div>
  </div> -->
  <div>
    <ElMenu
     @select="handleSelect"
      style="font-size: larger"
      mode="horizontal"
      class="el-menu-demo"
      :ellipsis="false"
      :default-active="activeIndex"
    >
      <ElMenuItem
        ><img
          src="../../public/image/001.png"
          alt=""
          style="width: 60px; padding-left: 18px; padding-right: 20px"
      /></ElMenuItem>
      <ElMenuItem index="home">
        <div class="img" title="主页">
          <img src="../../public/image/002.png" alt="" />
        </div>
      </ElMenuItem>

      <ElMenuItem index="soul">
        <div class="img" title="留言板">
          <img src="../../public/image/003.png" alt="" /> </div
      ></ElMenuItem>

          
      
      <ElMenuItem index="chat">
        <div class="img" title="消息">
          <img src="../../public/image/007.png" alt="" /> </div
      ></ElMenuItem>
      
      <ElMenuItem
        ><div style="padding-bottom: 25px; display: flex">
          <User></User> <div id="water"></div> </div
      ></ElMenuItem>
    </ElMenu>
  </div>


</template>

<script setup>
import {
  ElButton,
  ElDialog,
  ElInput,
  ElMenu,
  ElMenuItem,
  ElMessage,
  ElUpload,
} from 'element-plus';
import User from '../comment/user.vue';
import { ref } from 'vue';
import Api from '../script/Api';
import { useRouter } from "vue-router";

const router=useRouter()
const files = ref(null);
const list = ref([]);
const logovisible = ref(false);


const handleSelect = (key ,keyPath) => {
  if(key=='home'){
    router.push('/')
  }else if(key=='soul'){
    router.push('/soul')
  }else if(key=='whisper'){
    router.push('/whisper')
  }else if(key=='chat'){
    router.push(`/user/test/-1`)
  }
} 

const props=defineProps(['activeIndex'])



//#endregion
</script>

<style scoped>
.body {
  background-color: rgb(188, 212, 229);
}


.dialog-title{
  height: 36px;
  border: 1px solid #fff;
 
}

.close {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 24px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
  -webkit-transition: 300ms;
  transition: 300ms;

  font: 12px;
  color: #999;
}

.close:hover {
  opacity: 1;
}

.list {
}

.list:hover {
  background-color: #f0f0f0;
}

@keyframes clo {
  25% {
    left: 1;
    opacity: 1;
  }
  100% {
    left: 1;
    opacity: 1;
  }
}

.avatars {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.last-word {
  color: #999;
  padding: 8px 0;
  margin-bottom: -6px;
  overflow: hidden;
  width: 155px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.name {
  color: #333;
  font-size: 14px;
  min-height: 16px;
  line-height: 1;
}

.name-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.list-avatar {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  margin-right: 8px;
  position: relative;
}

.list-item {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 19px 24px;
  position: relative;
  cursor: pointer;
}

.list-container {
}

.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

.left {
  width: 240px;
  border-right: 1px solid #e9eaec;
  position: relative;
  height: 530px;
  overflow-y: scroll;
}
.left-title {
  padding-left: 24px;
  line-height: 35px;
  height: 36px;
  border-bottom: 1px solid #e9eaec;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
}

.im {
  font-size: 12px;
  color: #666;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
  box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
  border-radius: 4px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.space-bottom {
  padding-top: 10px;
}

.title {
  height: 42px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
  box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 15px;
  color: #666;
  border-radius: 4px;
}

.space-top {
  padding: 10px 10px 0;
  z-index: 11;
}

.avatar {
  width: 40px;
  border-radius: 50%;
}
.avatar:hover {
  width: 100px;
}

.el-menu--horizontal > .el-menu-item:nth-child(4) {
  margin-right: auto;
}

#water {
  margin-top: 30px;
  width: 30px;
  height: 30px;

  border-radius: 59% 41% 60% 40% / 49% 42% 58% 51%;
  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.5),
    1px 2px 2px rgba(0, 0, 0, 0.3), 1px 1px 3px rgba(0, 0, 0, 0.05),
    inset -10px -10px 15px rgba(255, 255, 255, 0.8);
  animation: action 3s linear infinite alternate;
}

/* #water::after{
      content: '';
      width: 20px;
      height: 20px;
      position: absolute;
      top: 24px;
      left: 48%;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 30% 70% 35% 65% / 28% 44% 56% 72% ;
    }

    #water::before{
      content: '';
      width: 1px;
      height: 1px;
      position: absolute;
      top: 2px;
      left: 44%;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 61% 39% 67% 33% / 28% 44% 56% 72% ;
    } */

@keyframes action {
  25% {
    border-radius: 80% 34% 55% 45% / 49% 46% 54% 51%;
  }

  50% {
    border-radius: 61% 39% 50% 50% / 43% 53% 47% 57%;
  }

  100% {
    border-radius: 43% 47% 45% 55% / 47% 55% 45% 53%;
  }
}

.img {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2),
    -2px -2px 2px rgba(255, 255, 255, 1);
  transition: all 0.2s ease-out;
}

img {
  width: 28px;
  transition: all 0.2s ease-out;
}

.img:hover {
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8),
    inset 2px 2px 30px rgba(0, 0, 0, 0.1),
    inset -2px -2px 30px rgba(255, 255, 255, 1);
}

.img:hover img {
  width: 25px;
}
</style>
